<template>
    <div class="homes">
      <!-- 轮播图 -->
      <div class="swiper">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" style="width:100%;height:180px;">
          <van-swipe-item v-for="(item,index) in swipes" :key="index">
            <img :src="item" alt="" @click="swipehref[index]" style="width:100%;height:100%;">
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- 九宫格 -->
      <div class="grid">
        <van-grid :border="false" :column-num="3">
          <van-grid-item v-for="(item,value) in grid_list" :key="value">
            <van-image :src="item.icon" style="width:60px;height:60px;" @click="$router.push(item.link)" />
            <p>{{item.text}}</p>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      swipes: [],
      swipehref: [],
      // 宫格图片加文字内容
      grid_list: [
        { icon: require('../../assets/image/menu1.png'), text: '新闻资讯',link: '/newslist' },
        { icon: require('../../assets/image/menu2.png'), text: '图片分享',link: '/photo/list'  },
        { icon: require('../../assets/image/menu3.png'), text: '商品购买',link: '/goods/list'  },
        { icon: require('../../assets/image/menu4.png'), text: '联系我们',link: '/contact'  },
        { icon: require('../../assets/image/menu5.png'), text: '留言反馈',link: '/person'  },
        { icon: require('../../assets/image/menu6.png'), text: '视频专区',link: '/person'  }
      ]
    }
  },

  created () {
    this.getSwiper()
  },

  methods: {
    async getSwiper () {
      const that = this
      const { data: res } = await this.$axios.get('http://www.liulongbin.top:3005/api/getlunbo')
      const swiperesult = res.message
      const swipes = [] // 轮播图图片
      const swipehref = [] // 图片地址
      for (let i = 0; i < swiperesult.length; i++) {
        swipes.push(swiperesult[i].img)
        swipehref.push(swiperesult[i].url)
      }
      that.$data.swipes = swipes
      that.$data.swipehref = swipehref
    }
  }
}
</script>

<style scoped lang='less'>

</style>
